<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="app-container-header">
        <el-form>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item>
                <el-input v-model="queryForm.blurry" placeholder="请输入查询内容" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item>
                <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-container-button">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAdd"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="toDelete"
        >
          删除
        </el-button>
      </div>
      <div class="app-container-table">
        <el-table
          ref="table"
          v-loading="loading"
          :data="dataList"
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column :show-overflow-tooltip="true" prop="type" label="资源类型" />
          <el-table-column :show-overflow-tooltip="true" prop="noticeType" label="消息类型" />
          <el-table-column :show-overflow-tooltip="true" prop="mediaId" label="媒体编号" />
          <el-table-column :show-overflow-tooltip="true" prop="url" label="访问地址" />
          <el-table-column :show-overflow-tooltip="true" prop="path" label="磁盘地址" />
          <el-table-column :show-overflow-tooltip="true" label="当前状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="240px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="toEdit(scope.row)">编辑</el-button>
              <el-button type="text" icon="el-icon-delete" size="mini" @click="toDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="queryForm.page"
          :page-size="queryForm.size"
          :total="pagerSize"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    <task-entity ref="entity" @fetch-data="fetchData" />
  </div>
</template>
<script>
import { deleteObject, queryAllByPager } from '@/api/ding/index'
import TaskEntity from './component/entity'
export default {
  name: 'DingTalkMediaManagerIndex',
  components: { TaskEntity },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dataList: [],
      rowId: [],
      pagerSize: 0,
      queryForm: {
        blurry: '',
        size: 10,
        page: 1
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    toQuery() {
      this.queryForm.page = 1
      this.initData()
    },
    toAdd() {
      this.$refs.entity.openEntity()
    },
    toEdit(data) {
      this.$refs.entity.openEntity(data)
    },
    toDelete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowId = []
        this.rowId.push(data.id)
        this.$confirm('此操作将永久删除' + data.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteObject(this.rowId).then(res => {
            this.$message.success('删除成功！')
            this.initData()
            this.rowId = []
          }).catch(() => {
            this.$message.error('删除失败！')
          })
        }).catch(() => {
          this.$message.success('取消删除成功！')
        })
      } else {
        if (this.rowId === null || this.rowId.length === 0) {
          this.$message.info('请选择删除项！')
        } else {
          this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteObject(this.rowId).then(res => {
              this.$message.success('删除成功！')
              this.initData()
              this.rowId = []
            }).catch(() => {
              this.$message.error('删除失败！')
            })
          }).catch(() => {
            this.$message.success('取消删除成功！')
          })
        }
      }
    },
    fetchData(data) {
      this.initData()
    },
    selectionChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.rowId = []
      } else {
        this.rowId = val.map((res) => {
          return res.id
        })
      }
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.initData()
    },
    handleSizeChange(val) {
      this.queryForm.size = val
      this.initData()
    },
    initData() {
      this.loading = true
      queryAllByPager(this.queryForm).then(res => {
        const { data } = res
        if (undefined !== data && undefined !== data.data && data.data !== null) {
          this.dataList = data.data
          this.pagerSize = data.pagerSize
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      this.loading = false
    }
  }
}
</script>

<style scoped>

</style>
